<template>
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
    >
        <el-form-item label="菜单名称" prop="name">
            <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentDirectory">
            <el-select v-model="ruleForm.level" placeholder="请选择">
                <el-option label="无上级菜单" value="0">无上级菜单</el-option>
                <el-option label="权限" value="1">权限</el-option>
                <el-option label="商品" value="1">商品</el-option>
                <el-option label="订单" value="1">订单</el-option>
                <el-option label="营销" value="1">营销</el-option>
            </el-select>
        </el-form-item>
        <el-form :disabled="close" label-width="120px" :rules="rules" ref="ruleFormRef">
            <el-form-item label="前端名称" prop="title">
                <el-input v-model="ruleForm.title" />
            </el-form-item>

            <el-form-item label="前端图标" prop="fontEndIcon" disabled="close">
                <el-input v-model="ruleForm.icon" />
            </el-form-item>
        </el-form>
        <el-form-item label="是否显示" prop="isshow">
            <el-radio-group v-model="ruleForm.hidden">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="rank" typeof="number">
            <el-input v-model="ruleForm.sort" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { useRoute, useRouter } from 'vue-router'; //引入路由组件
import { onMounted } from 'vue'; //引入钩子函数
import { user } from '@/api';
import { number } from 'prop-types';
const router = useRouter();
const timer = new Date();
const route = useRoute();
const close = ref(false);

//页面跳转编辑带来的id
const getmunsList = route.query.id;
// const parentId=parentId
const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    name: '',
    level: '',
    icon: '',
    hidden: '',
    createTime: timer,
    parentId: 0,
    sort: '',
    title: '',
    id: 0,
});

const rules = reactive<FormRules>({
    name: [
        {
            required: true,
            message: '菜单名不能为空',
            trigger: 'blur',
        },
    ],
    parentDirectory: [
        {
            required: false,
            trigger: 'change',
        },
    ],
    title: [
        {
            required: true,
            message: '前端名不能为空',
            trigger: 'blur',
        },
    ],
    fontEndIcon: [
        {
            trigger: 'blur',
        },
    ],
    isshow: [
        {
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    rank: [
        {
            message: 'Please select at least one activity type',
            trigger: 'blur',
        },
    ],
    desc: [
        {
            required: true,
            message: 'Please input activity form',
            trigger: 'blur',
        },
    ],
});
//找地址中是否含有？
let url = location.href.includes('?');

onMounted: {
    console.log('页面开始渲染');
    if (url) {
        close.value = true;
        user.getidmumunsApi(getmunsList as any).then(res => {
            console.log(res);
            console.log('sssssss', res.data.title);
            ruleForm.name = res.data.name;
            ruleForm.level = res.data.level;
            ruleForm.icon = res.data.icon;
            ruleForm.hidden = res.data.hidden;
            ruleForm.createTime = res.data.createTime;
            ruleForm.parentId = res.data.parentId;
            ruleForm.sort = res.data.sort;
            ruleForm.title = res.data.title;
            ruleForm.id = res.data.id;
        });
    } else {
        console.log('什么都不干');
    }
}
const submitForm = () => {
    //点击判断是添加还是修改
    if (url) {
        console.log('you');
        user.changemenuApi(ruleForm).then(res => {
            if (res.code === 200) {
                console.log('修改成功');
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? 'success' : 'error',
                });
                router.push('/ums/menu');
            } else {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? 'success' : 'error',
                });
            }
        });
    } else {
        //console.log('wu');
        //添加
        ruleFormRef.value?.validate((valid: boolean) => {
            if (valid) {
                ElMessageBox.confirm('确定要添加吗？', '添加用户', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    user.addmenuApi(ruleForm as any).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: res.message,
                                type: res.code === 200 ? 'success' : 'error',
                            });
                            router.push('/ums/menu');
                        } else {
                            ElMessage({
                                message: res.message,
                                type: res.code === 200 ? 'success' : 'error',
                            });
                        }
                    });
                });
            } else {
                return false;
            }
        });
    }

    // 表单检验，如果通过，再弹出提示
};
</script>
